<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="handleBack"> 
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>系统通知</p>
		</div>
		<div class="notice-content">
			<div class="page" v-for="(item,index) in list">
				<div class="page-top">
					<b v-if="item.read!=0"></b>
					<h1>{{item.system_title}}</h1>
					<p>{{item.system_time}}</p>
					<img v-if="item.system_img!=''" :src="item.system_img|url"/>
					<span>{{item.system_desc}}</span>
				</div>
				<div class="details" @click="handleDetails(item.system_id)">
					<span>查看详情</span>
					<img src="../../../assets/images/right.png"/>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import axios from "axios";
	import user from '../../../utils/isLogin';
	export default{
		data(){
			return{
				list:[],
				isClick:true
			}
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		created(){
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		   } else {
		      document.addEventListener("plusready", plusReady, false);
		   }
		   
	    	axios.post(user.src + '/index/system/system_list')
			.then(res=> {
				if(res.data.status == 200){
					this.list = res.data.data;
				}
			})
			.catch((error)=> { 
			});
		},
		components:{
			
		},
		methods:{
			handleBack(){
				var notice = plus.webview.currentWebview();
				plus.webview.close(notice);
			},
			handleDetails (id){
				if(this.isClick){
					this.isClick = false;
					var messdetails = plus.webview.create('messdetails.html','messdetails',{scrollIndicator:'none'},{
						systemId:id
					});
					messdetails.addEventListener("loaded", ()=> {
					   messdetails.show('pop-in', 300);
					   plus.webview.getWebviewById('notice').reload();
					   this.isClick = true;
					   messdetails = null;
					}, false);
				}
			}
		}
	}
</script>

<style lang='less' scoped>

html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;

	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display:flex;				
		.left-icon{
			width: 90px;
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			width: 80%;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}	
	.notice-content{
		padding: 147px 26px 0 26px;
		.page{
			border: 1px solid #e4e4e4;
			border-radius: 10px;
			background: #fff;
			margin-bottom: 25px;	
			.page-top{
				position: relative;
				padding: 28px 18px 17px 18px;
				border-bottom: 1px solid #e3e3e3;
				b{
					position: absolute;
					left:15px;
					top: 18px;
					background: red;
					width: 16px;
					height: 16px;
					border-radius: 50%;
				}	
				h1{
					font-size: 30px;
					color: #404040;
					line-height: 30px;
				}
				p{
					margin: 20px 0;
					font-size: 24px;
					color: #b2b2b2;
					line-height: 24px;
				}
				img{
					display: block;
					margin-bottom: 16px;
					display: block;
					width: 100%;
					height: auto;
				}
				span{
					font-size: 27px;
					color: #555555;
					line-height: 40px;
				}
				.none{
					display: none;
				}
			}
			.details{
				padding: 0 18px;
				display: flex;
				justify-content: space-between;
				height: 80px;
				span{
					display: block;
					line-height: 80px;
					font-size: 26px;
					color: #000;
				}
				img{
					display: block;
					margin-top: 24px;
					width: 15px;
					height:28px;
				}
			}
		}
	}
</style>